<!--suppress ALL -->
<template>
	<modal :show="visible" custom padding="0" width="90%" radius="18rpx">
		<view class="header" >
			<button open-type="share" class="shareBtn" id="5" :data-shop="product" ></button>

			<image src="/static/images/index/round_close_btn.png" @tap="$emit('cancel')"></image>
		</view>
		<swiper :duration="1000" indicator-dots class="swiper" autoplay :interval="3000">
			<swiper-item v-for="(image, index) in productData.imgList" :key="index" >
				<image :src="image"  style="border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;    margin: 0 auto;
    display: flow-root;"></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y class="content">
			<view class="wrapper">
				<view class="title">{{ productData.title }}</view>
				<view class="mb-20" v-html="productData.detail" style="white-space: pre-wrap;"></view>
				<view class="materials" v-for="(material, index) in productData.coldProductParameter" :key="index">
					<view class="group-name">{{ material.title }}</view>
					<view class="values">
						<view class="value" :class="{
							selected: value.is_selected,
							disabled: excludeIds[value.id]
						}" @tap="changeMaterialSelected(index, key, excludeIds[value.id])"
							  v-for="(value, key) in material.coldProductParameterDetail" :key="key">
							{{ value.name }}
							<text v-if="value.price" class="price">￥{{ (value.price / 100).toFixed(2) }}</text>
							<text class="star" v-if="value.isStar === 1">★</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom" :style="{height: productData.coldProductParameter.length ? '270rpx' : '210rpx'}">
			<view class="d-flex align-items-center">
				<view class="price-and-materials">
					<view class="price">￥{{ (productData.price / 100).toFixed(2) }}</view>
					<view class="materials" v-show="getProductSelectedMaterials">{{ getProductSelectedMaterials }}</view>
				</view>
				<actions :number="productData.number" @add="add" @minus="minus"></actions>
			</view>
			<button type="primary" class="add-cart-btn" @tap="addToCart">加入购物袋</button>
		</view>
	</modal>
</template>

<script>
	import Modal from '@/components/modal/modal.vue'
	import Actions from '../actions/actions.vue'

	export default {
		name: 'ProductModal',
		components: {
			Modal,
			Actions
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				productData: {},
				// 互斥的规则id
				excludeIds: {}
			}
		},

		watch: {
			product(val) {
				let product = JSON.parse(JSON.stringify(val))
				this.productData = this.defaultStartSelect(product)
        if(this.productData!=null&&this.productData.imgList!=null&&this.productData.imgList.length>1){
          this.productData.imgList.splice(0,1)
        }
				//this.productData = JSON.parse(JSON.stringify(val))
				this.$set(this.productData, 'number', 1)
			}
		},
		onLoad(){
			console.log("abc")
		},
		onShow(){
			console.log("ccc")
		},
		computed: {
			getProductSelectedMaterials() {
				//console.log("product",this.productData)
				if(this.productData && this.productData.coldProductParameter && this.productData.coldProductParameter.length) {
					let materials = []
					this.productData.coldProductParameter.forEach(({coldProductParameterDetail}) => {
						coldProductParameterDetail.forEach(value => {
							if(value.is_selected) {
								materials.push(value.name)
							}
						})
					})
					return materials.length ? materials.join('，') : ''
				}
				return ''
			}
		},



		methods: {
			defaultStartSelect(product){
				product.coldProductParameter.forEach(({coldProductParameterDetail}) => {
					coldProductParameterDetail.forEach(value => {
						if(value.isStar === 1) {

							this.$set(value,"is_selected",1)
						}
					})
				})
				return product;
			},
			changeMaterialSelected(index, key, disabled) {
				if (disabled) {
					this.$api.msg("与已选选项冲突");
					return;
				}
				const currentMaterial = this.productData.coldProductParameter[index];
				const detail = currentMaterial.coldProductParameterDetail[key];
				const { excludeIds, price, is_selected } = detail;
				// true，选中，false未选中
				let flag = is_selected || false;

				if(currentMaterial.coldProductParameterDetail.length > 1) {
					if(detail.is_selected) return
					this.productData.coldProductParameter[index].coldProductParameterDetail.forEach(value => {
						const { price: eachPrice, is_selected: eachSelected, excludeIds: eachExcludeIds } = value;
						this.$set(value, 'is_selected', 0);
						if (eachSelected) {
							// 减
							// 同时需要处理互斥的内容
							!eachExcludeIds ? null : (eachExcludeIds.split(",").map(i => {
								if (this.excludeIds[i]) {
									this.excludeIds[i]--;
								} else {
									this.excludeIds[i] = 0;
								}
							}));
						}
						// 价格的加减
						if (eachPrice) {
							if (eachSelected) {
								// 减
								this.productData.price = (this.productData.price - eachPrice) || 0;
							}
						}
					});
					// detail.is_selected = 1
					this.$set(this.productData.coldProductParameter[index].coldProductParameterDetail[key], "is_selected", 1);
					this.productData.number = 1
					// 同时需要处理互斥的内容
					!excludeIds ? null : (excludeIds.split(",").map(i => {
						if (this.excludeIds[i]) {
							this.excludeIds[i]++;
						} else {
							this.excludeIds[i] = 1;
						}
					}));
					// 价格的加减
					if (price) {
						this.productData.price = (this.productData.price - 0 + (price - 0)) || 0;
					}
				} else {
					// detail.is_selected = !detail.is_selected
					this.$set(this.productData.coldProductParameter[index].coldProductParameterDetail[key], "is_selected", !detail.is_selected);
					this.productData.number = 1
					if (is_selected) {
						// 减
						// 同时需要处理互斥的内容
						!excludeIds ? null : (excludeIds.split(",").map(i => {
							if (this.excludeIds[i]) {
								this.excludeIds[i]--;
							} else {
								this.excludeIds[i] = 0;
							}
						}));
					} else {
						// 加
						// 同时需要处理互斥的内容
						!excludeIds ? null : (excludeIds.split(",").map(i => {
							if (this.excludeIds[i]) {
								this.excludeIds[i]++;
							} else {
								this.excludeIds[i] = 1;
							}
						}));
					}
					// 价格的加减
					if (price) {
						if (is_selected) {
							// 减
							this.productData.price = (this.productData.price - price) || 0;
						} else {
							// 加
							this.productData.price = (this.productData.price - 0 + (price - 0)) || 0;
						}
					}
				}
			},
			add() {
				this.productData.number += 1
			},
			minus() {
				if(this.productData.number == 1) {
					return
				}
				this.productData.number -= 1
			},
			addToCart() {
				const product = {...this.productData, 'materials_text': this.getProductSelectedMaterials}
				this.$emit('add-to-cart', product)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 20rpx 30rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		z-index: 11;

		image {
			width: 60rpx;
			height: 60rpx;

			&:nth-child(1) {
				margin-right: 30rpx;
			}
		}
	}

	.swiper {
		height: 426rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		font-size: $font-size-sm;
		color: $text-color-assist;
		min-height: 1vh;
		max-height: calc(100vh - 100rpx - 426rpx - 250rpx);

		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			padding: 30rpx 30rpx 20rpx;
		}

		.title {
			font-size: $font-size-extra-lg;
			color: $text-color-base;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.labels {
			display: flex;
			font-size: 20rpx;
			margin-bottom: 8rpx;
			overflow: hidden;
			flex-wrap: wrap;

			.label {
				max-width: 40%;
				padding: 6rpx 10rpx;
				margin-right: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #939594;
				background-color: #f3f3f5;
				&.active {
					color: #c1b88f;
					background-color: #d4c88c;
				}
			}
		}

		.materials {
			width: 80%;
			margin-bottom: 20rpx;

			.group-name {
				padding: 10rpx 0;
			}

			.values {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;

				.value {
					background-color: #f5f5f7;
					color: $font-size-base;
					padding: 10rpx 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: $border-radius-lg;
					position: relative;
					.price {
						color: #cca77d;
					}
					.star {
						position: absolute;
						font-size: 20rpx;
						top: 4rpx;
						right: 4rpx;
						color: $font-size-base;
					}
					&.disabled {
						bacnground-color: #f8faf9;
						color: #bec0bf;
					}
					&.selected {
						background-color: #f7f1e5;
						color: #cca77d;
						.star {
							color: #cca77d;
						}
					}
				}
			}
		}
	}

	.bottom {
		border-radius: 15rpx;
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-top: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
		background-color: $bg-color-white;
		position: relative;
		z-index: 11;

		.price-and-materials {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			margin-right: 10rpx;

			.price {
				color: $color-primary;
				font-size: $font-size-extra-lg;
				font-weight: bold;
			}

			.materials {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.add-cart-btn {
			font-size: $font-size-lg;
			border-radius: $border-radius-base;
		}
	}
	.shareBtn{
		background: url(/static/images/index/menupopup_btn_share_normal.png);
		/* height: 0px; */
		width: 30px;
		z-index: 100;
		/* margin-top: -20px; */
		background-size: 30px 30px;
		background-repeat: no-repeat;
		margin-right: 8px;
	}
</style>
